<template>
<div style="height: 500px;width: 100%;">
	<div style="height: 10vh;width: 100%;background-color: #e0e5e1;">
		<div id="">
			  <div class="flex gap-4 mb-4 items-center">
				<el-form 
				  :model="data.user" 
				  :inline="true" 
				  label-width="80px"
				  style="display: flex; align-items: center; gap: 20px;"
				>
				  <el-form-item label="账号">
				    <el-input v-model="data.user.phone" placeholder="请输入账号" clearable />
				  </el-form-item>
				  <el-form-item label="姓名">
				    <el-input v-model="data.user.name" placeholder="请输入姓名" clearable />
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="onSubmit" icon="Search">搜索</el-button>
				    <el-button @click="resetForm">重置</el-button>
					<el-button @click="go2Add">添加新用户</el-button>
				  </el-form-item>
				</el-form>
			  </div>
		</div>
	</div>
	<el-table :data="data.sller" style="width: 100%">
		<el-table-column label="手机号" >
		  <template #default="scope">
		    <div style="display: flex; align-items: center">
		      <span style="margin-left: 10px">{{ scope.row.phone }}</span>
		    </div>
		  </template>
		</el-table-column>
	    <el-table-column label="姓名" >
	      <template #default="scope">
	        <div style="display: flex; align-items: center">
	          <span style="margin-left: 10px">{{ scope.row.uname }}</span>
	        </div>
	      </template>
	    </el-table-column>
	    <el-table-column label="性别" >
	      <template #default="scope">
	        <div style="display: flex; align-items: center">
	          <span style="margin-left: 10px">{{ sex(scope.row.sex) }}</span>
	        </div>
	      </template>
	    </el-table-column>
		<el-table-column label="余额" >
		  <template #default="scope">
		    <div style="display: flex; align-items: center">
		      <span style="margin-left: 10px">{{ scope.row.balance }}</span>
		    </div>
		  </template>
		</el-table-column>
		<el-table-column label="收货地址" >
		  <template #default="scope">
		    <div style="display: flex; align-items: center">
		      <span style="margin-left: 10px">{{ scope.row.addr }}</span>
		    </div>
		  </template>
		</el-table-column>
		<el-table-column label="vip" >
		  <template #default="scope">
		    <div style="display: flex; align-items: center">
		      <span style="margin-left: 10px">{{ vip(scope.row.vip) }}</span>
		    </div>
		  </template>
		</el-table-column>
		<el-table-column label="头像">
		  <template #default="scope">
		    <div style="width: 10vw;height: 10vw">
		    	 <img v-bind:src="'api/public/finduserimg/'+scope.row.pic" style="height: 98%; width: 100%;" >
		    </div>
		  </template>
		</el-table-column>
		
		<el-table-column label="操作">
		  <template #default="scope">
		  <el-button size="small" @click="go2Update(scope.row)">
		      修改
		    </el-button> 
		    <el-button
		      size="small"
		      type="danger"
		      @click="del(scope.row.uid)"
		    >
		      删除
		    </el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  

</div>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted} from "vue"
	import {$get,$postx,$postf} from "../../../ajax/index.js"
	import myalert from "../../../utils/myalert.js"
	import { useRoute,useRouter } from 'vue-router'
	import { Timer } from '@element-plus/icons-vue'
	import { Search } from '@element-plus/icons-vue'
	const data=reactive({
		sller:[],
		user:{},
	})
	// 初始化数据
	onMounted(()=>{
		$get("/api/adm/seller/findseller")
		.then((resp)=>{
			console.log("用户信息"+resp.data)
			data.sller=resp.data.data;
		})
	})
	// 映射性别
	function sex(sex){
		if(sex==0)return "女生";
		if(sex==1)return "男生";
	}
	// 映射会员
	function vip(vip){
		if(vip==0)return "非会员";
		if(vip>0) return vip+"级";
	}
	// 跳转到修改用户页面
	const router = useRouter()
	function go2Update(seller){
		router.push({
			path:"/adm/add",
			query:{
				uid:seller.uid,
			}
		})
	}
	// 跳转到添加用户页面
	function go2Add(){
		router.push({
			path:"/adm/add",
			query:{
				tid:0,
			}
		})
	}
	// 搜索
	function onSubmit(){
		console.log(data.user)
		$postx("/api/adm/seller/finduser",data.user)
		.then((resp)=>{
			console.log(resp.data.data)
			data.sller=resp.data.data;
			ElMessage({
				message:"查询成功",
				type:'success',
			})
		})
	}
	function resetForm(){
		data.user.phone=null;
	}
	// 删除
	function del(uid){
		$get("/api/adm/seller/del/"+uid)
		.then((resp)=>{
			console.log(resp.data.data)
			data.sller = resp.data.data;
		})
	}
</script>

<style>
</style>
